<template>
    <el-container>
        <el-header class="top_header">
            <i class="el-icon-s-home" style="font-size: 30px;margin-top: 1%;" @click="returnToHome"></i>
        </el-header>
        <el-dialog title="添加信息" :visible.sync="dialogAddressVisible">
            <el-form :model="userDate">
                <el-input v-model="userDate.organization" autocomplete="off" placeholder="组织"
                    style="margin-bottom: 2%;"></el-input>
                <el-input v-model="userDate.contracaddress" autocomplete="off" placeholder="联系地址"
                    style="margin-bottom: 2%;"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="insAddress()">确 定</el-button>
            </div>
        </el-dialog>

        <el-main class="mid_main">
            <!-- 用户主要信息的卡片 -->
            <el-row id="userInfo_row">
                <el-col :span="12" class="userInfo_left">
                    <el-descriptions title="用户信息" direction="vertical" :column="4" border>
                        <el-descriptions-item label="用户名"> {{userDate.username}}</el-descriptions-item>
                        <el-descriptions-item label="手机号"> {{userDate.telphone}}</el-descriptions-item>
                        <el-descriptions-item label="志愿者编号" :span="2"> {{userDate.id}}</el-descriptions-item>
                        <el-descriptions-item label="组织"> {{userDate.organization}}</el-descriptions-item>
                        <el-descriptions-item label="联系地址"> {{userDate.contracaddress}}</el-descriptions-item>
                    </el-descriptions>

                </el-col>
                <!-- 饼图放置 -->
                <el-col :span="12">
                    <div id="userInfo_right">

                    </div>
                </el-col>
            </el-row>
            <!-- 志愿者活动的卡片 -->
            <el-row>
                <el-col :span="12" v-for="(item, index) in voluntaryData" :key="index">
                    <div class="voluInfo_car">
                        <el-col :span="20" class="car_title">
                            {{item.title}}
                        </el-col>
                        <el-col :span="4" class="car_duration">
                            志愿时长：{{item.duration}}
                        </el-col>
                        <el-col :span="20" style="height: 100px;">
                            <el-col :span="24" class="car_summary">
                                简介：{{item.summary}}
                            </el-col>
                            <el-col :span="10" class="car_eventtime">
                                时间：{{item.eventtime}}
                            </el-col>
                            <el-col :span="14" class="car_address">
                                地址：{{item.address}}
                            </el-col>
                        </el-col>
                        <el-col :span="4" style="height: 100px;align-content: center;">
                            <el-button type="primary" style="margin-left: 18%;"
                                @click="openRequest(item.id)">申请</el-button>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-main>
        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span> 是否要申请</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCenter()">确 定</el-button>
            </span>
        </el-dialog>

    </el-container>

</template>


<script>
    import * as echarts from 'echarts';
    import axios from 'axios';
    export default {
        data() {
            return {
                voluntaryData: [],
                userDate: {
                    "id": 0,
                    "username": "",
                    "telphone": "",
                    "volunteertime": "",
                    "organization": "",
                    "contracaddress": "",
                },
                loginUserId: 0,
                userVolunteerTime: "",
                dialogAddressVisible: false,
                centerDialogVisible: false,
                currentRequestId: 0
            }
        },
        mounted() {
            this.loginUserId = this.$route.query.loginUserId;
            this.getVolunteerInfo();
            this.getAllVoluntary();
        },
        methods: {
            getAllVoluntary: function () {
                axios.get("http://localhost:8080/getAllVoluntary").then(result => {
                    this.voluntaryData = result.data.data;
                })
            },
            getVolunteerInfo: function () {
                // 加载数据
                axios.get("http://localhost:8080/getVolunteerInfo/" + this.loginUserId).then((result) => {
                    this.userDate = result.data.data;
                    this.userVolunteerTime = result.data.data.volunteertime;
                    this.initPie();
                    if (result.data.data.isvolunteer == 0) {
                        this.addAddress();
                        this.$message.error("还未填写组织以及联系地址,请填写！");
                    }
                })
            },
            initPie: function () { //饼状图
                let charDom = document.getElementById("userInfo_right");
                let myChart = echarts.init(charDom);
                let option;
                let timeLeft = 100 - this.userVolunteerTime;
                option = {
                    title: {
                        text: '志愿者时长',
                        subtext: '时长统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '志愿时长',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: this.userVolunteerTime, name: '已完成' },
                                { value: timeLeft, name: '剩余需完成' }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            addAddress: function () {
                this.dialogAddressVisible = true;
            },
            insAddress: function () {
                this.dialogAddressVisible = false;
                let realInfo = {
                    "id": 0,
                    "organization": "",
                    "contracaddress": "",
                }
                realInfo.id = this.userDate.id;
                realInfo.organization = this.userDate.organization;
                realInfo.contracaddress = this.userDate.contracaddress;
                axios.post("http://localhost:8080/insVolunteerAdd", realInfo).then((result) => {
                    if (result.data.code == 1) {
                        this.getVolunteerInfo();
                        axios.get("http://localhost:8080/setVolunteer/" + realInfo.id)
                    }

                })
            },
            submitCenter: function () {
                this.centerDialogVisible = false
                let realInfoById = {
                    "userid": 0,
                    "voluntaryid": 0
                }
                realInfoById.userid = this.loginUserId
                realInfoById.voluntaryid = this.currentRequestId
                // 发送请求去后端，将数据插入
                axios.post("http://localhost:8080/insertVolAct", realInfoById).then(result => {
                    if (result.data.code == 1) {
                        this.$message.success("申请成功！");
                    }
                })
            },
            openRequest: function (val) {
                this.centerDialogVisible = true
                this.currentRequestId = val

            }, returnToHome: function () {
                if (this.loginUserId == null) {
                    this.$router.push({
                        path: '/loginPage',
                    })
                }
                else {
                    this.$router.push({
                        path: '/serviceindex',
                        query: {
                            loginUserId: this.loginUserId
                        }
                    })
                }
            }

        }
    }

</script>


<style scoped>
    .top_header {
        height: 100px;
        background-color: #cd1212;
    }

    .mid_main {
        height: 700px;
        padding-left: 5%;
        padding-right: 5%;
    }

    .under_footer {
        height: 100px;
        background-color: #0ad62c;
    }

    .userInfo_left {
        height: 250px;
    }

    #userInfo_right {
        height: 250px;
    }

    .userInfo_row {
        padding-bottom: 2%;
    }

    .voluInfo_car {
        height: 150px;
        background-color: #a9aaab4f;
        margin-bottom: 2%;
        margin: 2%;
    }

    .car_title {
        height: 50px;
        border-bottom: 1px solid #bebfbe52;
        text-align: center;
        font-size: large;
        line-height: 50px;
    }

    .car_summary {
        height: 50px;
        font-size: 12px;
        line-height: 20px;
    }

    .car_address {
        height: 50px;
        font-size: 13px;
        line-height: 50px;
    }

    .car_eventtime {
        height: 50px;
        font-size: 15px;
        line-height: 50px;
    }

    .car_duration {
        line-height: 50px;
    }
</style>

<style>

</style>